<template>
  <div class="w-full mx-auto relative overflow-visible mb-8">
    <Carousel
      :value="images"
      :numVisible="1"
      :numScroll="1"
      :showNavigators="false"
      :showIndicators="false"
      autoplayInterval="4000"
      circular
      :responsiveOptions="responsiveOptions"
    >
      <template #item="slotProps">
        <div class="surface-border border-round text-center">
          <div>
            <img :src="slotProps.data.image" style="width: 100%; display: block" />
          </div>
        </div>
      </template>
    </Carousel>

    <div class="w-full absolute z-10" style="bottom: -7rem">
      <div
        class="container mx-auto bg-white flex flex-row justify-content-evenly text-primary py-5 shadow-1"
      >
        <template v-for="(item, index) in infos" :key="index">
          <div class="h-9rem flex flex-column justify-content-center justify-items-start">
            <span
              ><span class="text-6xl font-medium">{{ item.v }}</span
              ><span class="text-xl"> / {{ item.u }}</span></span
            >
            <span class="text-xl">{{ item.k }}</span>
          </div>
          <Divider layout="vertical" v-if="index < infos.length - 1" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const $route = useRoute()
onMounted(() => {})

const infos = [
  { k: '注册企业', v: '26342', u: '家' },
  { k: '金融产品', v: '287', u: '项' },
  { k: '金融机构', v: '413', u: '个' },
  { k: '累计解决需求', v: '7,556,932.90', u: '万元' }
]

const images = ref([
  { image: 'mock/22_20230427142026A004.jpg' },
  { image: 'mock/555_20230427142055A008.jpg' }
])
const responsiveOptions = ref([
  {
    breakpoint: '1400px',
    numVisible: 2,
    numScroll: 1
  },
  {
    breakpoint: '1199px',
    numVisible: 3,
    numScroll: 1
  },
  {
    breakpoint: '767px',
    numVisible: 2,
    numScroll: 1
  },
  {
    breakpoint: '575px',
    numVisible: 1,
    numScroll: 1
  }
])
</script>
